<template>
    <div class="w-full h-full absolute bg-black z-50 top-0 left-0 select-none" v-if="isload">
        <div class="w-full h-full flex items-center justify-center"><img :src="dataList[index].filepath" class="animate__animated" ref="img"></div>
        <div class="absolute top-1/2 left-3" @click="changeImg('left')">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-14 fill-gray-300"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg>

        </div>
        <div class="absolute top-1/2 right-3" @click="changeImg('right')">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-14 fill-gray-300"><path fill="none" d="M0 0h24v24H0z"></path><path d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z"></path></svg>
        </div>
        <div class="absolute left-1/2 -translate-x-1/2 bottom-3" @click="emits('close')">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-14 fill-red-500"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"></path></svg>
        </div>
    </div>
</template>
<script setup>
import { onMounted,ref,watch } from 'vue';
const isload=ref(false)
const props=defineProps({
    'dataList':{
        default:[]
    },
    'index':{
        default:0
    }
})
const img=ref(null)
const emits=defineEmits(['close','goright','goleft'])

const changeImg=(fx)=>{



    if(fx=='left'){
        emits('goleft')
    }
    if(fx=='right'){
        emits('goright')
    }


}

onMounted(() => {
    isload.value=true
})

</script>